<template>
  <div style="padding: 20px 40px">
    <div class="toptime dis disAl" style="justify-content: space-between;">
      <div />
      <div v-if="schedule_type == 1" class="dis disAl">
        <div class="mar-right10 l-r" @click="up_daytime(0)"><i
          class="el-icon-arrow-left"
          style="color: #6b7cdd"
        /></div>
        <div class="mar-left15 mar-right15 foSi18 xuanze">{{ daytime }}</div>
        <div class="mar-left10 l-r" @click="up_daytime(1)"><i
          class="el-icon-arrow-right"
          style="color: #6b7cdd"
        /></div>
        <div class="mar-left10">
          <el-button type="success" size="small" class="bac6b7" @click="gettime()">返回今天</el-button>
        </div>
        <div class="mar-left10">
          <el-button
            v-if="schedule_type == 1"
            type="primary"
            size="small"
            class="bac759"
            @click="schedule_change(2)"
          >周课表</el-button>
          <el-button
            v-if="schedule_type == 2"
            type="primary"
            size="small"
            class="bac759"
            @click="schedule_change(1)"
          >日课表</el-button>
        </div>
      </div>
      <div v-if="schedule_type == 2" class="hei34 dis disAl disJuC">
        <svg-icon
          icon-class="arrow-left"
          class="mar0 cuPo"
          style="width: 29px;height: 29px;"
          @click.stop="timeChange(1)"
        />
        <div class="mar-left15 mar-right15 foSi18 xuanze">{{ oneTime.time }} 至 {{ sevenTime.time }}</div>
        <svg-icon
          icon-class="arrow-right"
          class="mar0 cuPo"
          style="width: 29px;height: 29px;"
          @click.stop="timeChange(2)"
        />
        <div class="mar-left10 dis">
          <div class="mar-left10 mar-right10">
            <el-button type="success" size="small" class="bac6b7" @click="timeIndex= 0,timeCreated()">返回本周</el-button>
          </div>
          <el-button
            v-if="schedule_type == 1"
            type="primary"
            size="small"
            class="bac759"
            @click="schedule_change(2)"
          >周课表</el-button>
          <el-button
            v-if="schedule_type == 2"
            type="primary"
            size="small"
            class="bac759"
            @click="schedule_change(1)"
          >日课表</el-button>
        </div>
      </div>
      <div>
        <el-tooltip placement="left">
          <div slot="content"><span style="font-size: 16px">提示</span><br><br>
            1、点击课程，查看该课程今天预约的情况;<br><br>
            2、4/12/28分别表示签到人数、预约人数<br><br>及课程容纳人数;
          </div>
          <svg-icon icon-class="tishi" class="mar0 cuPo" style="width: 20px;height: 20px;" />
        </el-tooltip>
      </div>
    </div>
    <div class="xian mar-top15 mar-bott20" />
    <div v-if="schedule_type == 1 && course_list.length > 0" style="width: 100%" class="dis disAl">
      <div class="mar-right10 l-r" @click.stop="courseSlideClick(0)"><i
        class="el-icon-arrow-left"
        style="color: #6b7cdd"
      />
      </div>
      <div id="courseSlide" style="width: 100%;height: 210px;overflow: hidden;min-width: 1060px;" class="">
        <div id="courseSlide1" style="display: inline-flex;" :style="'margin-left: -'+courseLeft+'px;'">
          <div
            v-for="(item,index) in course_list"
            :key="index"
            class="items mar-right20 cuPo"
            :class="item.id === search_course_id ? 'cur_choice' : ''"
            style="border: 1px solid #ccc;float: left;height: 210px"
            @click="course_change(item.id,item)"
          >
            <div
              class="dis"
              style="width: 100%;justify-content: space-between;background-color: #ededef;padding: 10px;min-height: 85px"
            >
              <div style="font-size: 16px" :style="{'color':item.class_state === 0 ? '#b2b2b2' : ''}">
                <div style="overflow: hidden; display: -webkit-box;-webkit-line-clamp: 2; -webkit-box-orient: vertical;">{{ item.name }}</div>
                <div class="mar-top5">{{ item.class_start_time }} - {{ item.class_end_time }}</div>
              </div>
              <div><img src="../../assets/member/card/quality.png"></div>
              <div>
                <div :style="'background: #'+item.colors+';'" style="width: 20px;height: 20px;" />
              </div>
            </div>
            <div
              style="color:#b2b2b2;font-size: 12px;padding: 10px;height: 123px"
              :class="item.class_state === 0 ? 'huise' : ''"
            >
              <div class="dis" style="justify-content: right;margin-top: -25px;align-items: baseline;">
                <div
                  style="font-size: 16px;font-weight: 400;color: #000;margin-right: 5px"
                  :style="{'color':item.class_state === 0 ? '#b2b2b2' : ''}"
                >{{ item.coach_name }}
                </div>
                <div><img
                  :src="item.coach_cover_img"
                  style="width: 40px;height: 40px;border-radius: 5px"
                >
                </div>
              </div>
              <div style="height: 20px" />
              <div>{{ item.classroom_name }}</div>
              <div class="mar-top5 ">{{ item.sign_in_num }}/{{ item.reservation_num }}/{{ item.people_num }}
              </div>
              <div v-show="item.class_state === 1 && item.status == 1" class="yybtn" @click.stop="yuyue(item)">预约</div>
              <div v-show="item.status == 3" class="yybtn">已取消</div>
            </div>
          </div>
        </div>
      </div>
      <div class="mar-left10 l-r" @click.stop="courseSlideClick(1)"><i
        class="el-icon-arrow-right"
        style="color: #6b7cdd"
      />
      </div>
    </div>
    <div
      v-if="schedule_type == 1 && course_list.length <= 0"
      style="color: #888888;width: 100%;text-align: center;height: 150px;line-height: 150px"
    >
      暂无排课
    </div>
    <!--  周课表  -->
    <div v-show="schedule_type == 2" class="wid100">
      <table width="100%" class="syllabus-content-data" :class="skin === 1?'syllabus-content-data2':''">
        <thead>
          <tr>
            <th width="66">
              <div>DAY</div>
            </th>
            <th v-for="(item, index) in timeList" :key="index">
              <div class="syllabus-thead-cell hei100">
                <div class="foSi17 fowe800 hei20 dis disAl disJuC">{{ item.name }}</div>
                <div class="textCen" style="color: #4f4f4f;">{{ item.time }}</div>
              </div>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,index) in list" :key="index">
            <td class="time-group-text-box">
              <div class="time-group-text textCen fowe800" style="font-size: 14px">{{ item.time[0] }}</div>
            </td>
            <td v-for="(item1,index1) in item.course" :key="index1">
              <div
                class="syllabus-list-course"
                style="cursor: pointer;"
                :style="{'border':week_search_course_id == item1.id ? '1px solid #6b7cdd' : '1px solid #fff'}"
                @click="week_search_coures_change(item1.id)"
              >
                <div
                  v-if="JSON.stringify(item1) !== '[]'"
                  class="active1"
                  :style="skin === 1?'background: #'+item1.colors+';color: #fff;':''"
                >
                  <div
                    v-if="skin !== 1"
                    class="course-color"
                    :style="'background: #'+item1.colors+';'"
                  >
                    <span class="arrow" />
                  </div>
                  <span v-if="item1.schedule_type === '4'" class="quality-badge" />
                  <div style="height: 20px" />
                  <div class="wid90 mar foSi14">
                    <p class="mp0">{{ item1.start_time }}~{{ item1.end_time }}</p>
                    <p class="mp0">{{ item1.name }}</p>
                    <p class="mp0">{{ item1.coach_name }}</p>
                    <p class="mp0">{{ item1.classroom }}</p>
                    <p class="mp0 ">
                      <i
                        v-for="(item2,index2) in 5"
                        :key="index2"
                        style="color: #505050;"
                        :class="index2+1 <= Number(item1.dif_star)?'el-icon-star-on':'el-icon-star-off'"
                      />
                    </p>
                    <p class="mp0 ">{{ item1.reservation_num }}/{{ item1.sign_in_num }}/{{ item1.people_num }}
                    </p>
                  </div>
                  <div v-if="item1.class_state === 1" class="yybtn1" @click.stop="yuyue(item1)">预约</div>
                  <div v-else class="yybtn2" />
                  <div style="height: 20px" />
                </div>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <!-- 课程列表   -->
    <div style="padding: 10px 38px;justify-content: space-between" class="mar-top10 dis disAl">
      <div class="dis disAl">
        <div><img class="person_icon" src="../../assets/member/card/person-icon.png"></div>
        <div>当前<span style="color: #6b7cdd;">{{ reservation_num }}</span>人预约，<span style="color: #6b7cdd;">{{ line_num }}</span>人排队</div>
        <div class="dis btn_box">
          <div
            class="left_btn dis disAl disJuC cuPo"
            :class="btn_choice == 1 ? 'choice_btn':''"
            @click="coureschange(1)"
          >预约记录</div>
          <div
            class="left_btn dis disAl disJuC cuPo"
            :class="btn_choice == 2 ? 'choice_btn':''"
            @click="coureschange(2)"
          >管理排队
          </div>
        </div>
      </div>
      <div v-if="btn_choice == 1" class="dis">
        <el-button size="small" class="bac6b7" type="warning" @click="checkClick(2)">批量签到</el-button>
        <el-button size="small" class="bac759" type="primary" @click="checkClick(3)">一键签到</el-button>
      </div>
      <div v-else class="dis">
        <el-button
          size="small"
          class="bac759"
          type="warning"
          @click="table_sort = !table_sort"
        >{{ table_sort == true ? '取消排序' : '排序' }}</el-button>
        <el-button
          size="small"
          class="bac6b7"
          type="warning"
          @click="yuyue(group,1)"
        >代排队</el-button>
      </div>
    </div>
    <div v-show="btn_choice == 1" v-loading="loading" style="padding: 15px 30px">
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <div slot="empty" class="m-empty-box">
          <div class="mar" style="width: 168px;height: 180px;">
            <img src="https://www.jianyigongxiang.com/public/membercard/empty.png" class="wh100">
          </div>
          <div class="title">暂无数据</div>
        </div>
        <el-table-column type="selection" label="全选" />

        <el-table-column width="80" label="ID">
          <template slot-scope="scope">
            <div class="dis disAl">
              <span class="mar-left5 overflowHidden" style="width: 100px;">{{ scope.row.id }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column width="80" label="头像">
          <template slot-scope="scope">
            <div class="dis disAl">
              <img :src="scope.row.headimg?scope.row.headimg:avatar" style="width: 30px;height: 30px;">
            </div>
          </template>
        </el-table-column>
        <el-table-column width="100" label="昵称">
          <template slot-scope="scope">
            <div class="dis disAl">
              <span class="mar-left5 overflowHidden" style="width: 100px;">{{ scope.row.nickname }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column width="80" label="姓名">
          <template slot-scope="scope">
            <div class="dis disAl">
              <span class="mar-left5 overflowHidden" style="width: 100px;">{{ scope.row.realname }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column width="140" label="手机号">
          <template slot-scope="scope">
            <div class="dis disAl">
              <span class="mar-left5 overflowHidden" style="width: 100px;">{{ scope.row.tel }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="pay_type_text" label="支付方式" />
        <el-table-column prop="card_no" label="卡号" />
        <el-table-column prop="pay_money" label="支付金额" />
        <el-table-column prop="ded_balance" label="扣减后余额" />
        <el-table-column prop="cur_balance" label="当前卡余额" />
        <el-table-column label="状态">
          <template slot-scope="scope">
            <div class="dis disAl">
              <div><el-tag>约</el-tag></div>
              <!-- <div v-if="scope.row.status === 0" style="color: #6b7cdd">已排队</div> -->
              <div v-if="scope.row.status === 1" style="color: #6b7cdd">已预约</div>
              <div v-if="scope.row.status === 2" style="color: #6b7cdd">已签到</div>
              <div v-if="scope.row.status === 3" style="color: #6b7cdd">已取消</div>
              <div v-if="scope.row.status === 4" style="color: #6b7cdd">已完成</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('table.actions')"
          align="center"
          width="300"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <div class="cuPo dis" style="justify-content: center">
              <div
                v-if="scope.row.status === 1"
                class="cuPo"
                style="align-items: center; margin-right: 10px"
                @click.stop="upQueue(scope.row.id)"
              >
                <i class="el-icon-circle-close" style="color: #6b7cdd; font-size: 18px" />取消预约
              </div>
              <div
                v-if="scope.row.status === 1"
                class="cuPo"
                style="align-items: center; margin-right: 10px"
                @click.stop="getDetailsClick(scope.row.id,2)"
              >
                <i class="el-icon-edit" style="color: #6b7cdd; font-size: 18px" />签到
              </div>
              <div
                v-if="scope.row.status === 2"
                class="cuPo"
                style="align-items: center; margin-right: 10px"
                @click.stop="quxiaoCheck(scope.row.id)"
              >
                <i class="el-icon-circle-close" style="color: #6b7cdd; font-size: 18px" />取消签到
              </div>
              <div
                class="cuPo"
                style="align-items: center; margin-right: 10px"
                @click.stop="getDetailsClick(scope.row.id,1)"
              >
                <i class="el-icon-document" style="color: #6b7cdd; font-size: 18px" />详情
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
				@pagination="getAppointmentRecord" /> -->
    </div>
    <div v-show="btn_choice == 2" v-loading="loading" style="padding: 15px 30px">
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <div slot="empty" class="m-empty-box">
          <div class="mar" style="width: 168px;height: 180px;">
            <img src="https://www.jianyigongxiang.com/public/membercard/empty.png" class="wh100">
          </div>
          <div class="title">暂无数据</div>
        </div>
        <el-table-column type="selection" label="全选" />
        <el-table-column label="ID">
          <template slot-scope="scope">
            <div class="dis disAl">
              {{ scope.row.id }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="头像">
          <template slot-scope="scope">
            <div class="dis disAl">
              <img :src="scope.row.headimg" style="width: 30px;height: 30px;">
            </div>
          </template>
        </el-table-column>
        <el-table-column label="昵称">
          <template slot-scope="scope">
            <div class="dis disAl">
              <span class="mar-left5 overflowHidden" style="width: 100px;">{{ scope.row.nickname }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="姓名">
          <template slot-scope="scope">
            <div class="dis disAl">
              <span class="mar-left5 overflowHidden" style="width: 100px;">{{ scope.row.realname }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="手机号">
          <template slot-scope="scope">
            <div class="dis disAl">
              <span class="mar-left5 overflowHidden" style="width: 100px;">{{ scope.row.tel }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="会员卡种类">
          <template slot-scope="scope">{{ scope.row.card_name }}</template>
        </el-table-column>
        <el-table-column prop="card_no" label="卡号" />
        <el-table-column prop="reservation_time" label="排队时间" />
        <el-table-column label="状态">
          <template slot-scope="scope">
            <div class="dis disAl">
              <div v-if="scope.row.status === 0">排队中</div>
              <div v-if="scope.row.status === 3">已取消</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('table.actions')"
          align="center"
          width="300"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <div v-if="!table_sort" class="cuPo dis" style="justify-content: center">
              <div
                v-if="scope.row.status === 0"
                class="cuPo"
                style="align-items: center; margin-right: 10px"
                @click.stop="upQueue(scope.row.id)"
              >
                <i class="el-icon-circle-close" style="color: #6b7cdd; font-size: 18px" />取消排队
              </div>
              <!-- <div v-if="scope.row.status == 0" class="cuPo"
								style="align-items: center; margin-right: 10px">
								<i class="el-icon-edit" style="color: #6b7cdd; font-size: 18px" />签到
							</div> -->
              <div
                class="cuPo"
                style="align-items: center; margin-right: 10px"
                @click.stop="getDetailsClick(scope.row.id,1)"
              >
                <i class="el-icon-document" style="color: #6b7cdd; font-size: 18px" />详情
              </div>
            </div>
            <div v-if="table_sort" class="cuPo dis" style="justify-content: center">
              <div class="cuPo" style="align-items: center; margin-right: 10px">
                <i class="el-icon-top" style="color: #6b7cdd; font-size: 18px" />上移
              </div>
              <div class="cuPo" style="align-items: center; margin-right: 10px">
                <i class="el-icon-bottom" style="color: #6b7cdd; font-size: 18px" />下移
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
				@pagination="getAppointmentRecord" /> -->
    </div>
    <!-- 预约弹窗 -->
    <div v-if="is_yuyue_show" id="commonBg" class="m-dialog-bg" />
    <div class="m-dialog-box fade-in" style="font-size: 14px;">
      <div class="dialog-content">
        <div v-if="is_yuyue_show" class="dialog-content">
          <div class="dialog-content-header">
            <div class="dialog-title">
              <span class="title-type"> 约团课 </span>（
              <span class="mr-15">{{ daytime }}</span>
              <span class="mr-15">{{ week }}</span>
              <span>{{ todayatime === 0?'今天':todayatime+'天后' }}</span>）
              <em class="icon icon-card-tips2 ml-10 order-handle" />
            </div>
            <span class="dialog-close js-dialog_close" @click="is_yuyue_show = false" />
          </div>
          <div class="dialog-content-main">
            <!-- 团课预约 -->
            <div class="m-wkt-order flex-edit-box">
              <div class="field-box">
                <div class="item clear">
                  <label class="fl label">课程信息</label>
                  <span class="mr-25">{{ group.name }}</span>
                  <span class="mr-25">{{ group.coach_name }}</span>
                  <span class="mr-25">{{ group.class_start_time }} ~ {{ group.class_end_time }}</span>
                </div>
              </div>
              <div class="field-box">
                <div class="item clear" style="height: 200px;">
                  <label class="fl label">会员信息</label>
                  <div class="dialog-wk-memberinfo-box">
                    <div class="search-box">
                      <el-input
                        v-model="search_npc"
                        placeholder="姓名/手机号/卡号"
                        style="width: 140px;"
                        @input="nameInput"
                      />
                      <div
                        v-if="nameVisible"
                        class="poAbs nameSuo"
                        style="left: 115px;top: 100px;"
                      >
                        <div
                          v-for="(item,index) in nameList"
                          :key="index"
                          class="suosouText foSi14"
                          @click.stop="nameClick(item)"
                        >
                          {{ item.title }}</div>
                      </div>
                    </div>
                    <div class="dialog-wk-memberinfo flex-detail-box">
                      <div class="field-box txt-els">
                        <div class="item-l">
                          <label class="fl label">会员</label>
                          <span
                            class="fr wk_name_text"
                          >{{ namePicture?namePicture.realname:'' }}</span>
                        </div>
                        <div class="item-r">
                          <label class="fl label">开卡场馆</label>
                          <span class="fr wk_venue_title">{{ namePicture?namePicture.brand_name:'' }}</span>
                        </div>
                      </div>
                      <div class="field-box txt-els">
                        <div class="item-l">
                          <label class="fl label">手机号</label>
                          <span
                            class="fr wk_name_phone"
                          >{{ namePicture?namePicture.tel:'' }}</span>
                        </div>
                        <div class="item-r">
                          <label class="fl label">卡号</label>
                          <span
                            class="fr wk_name_cardno"
                          >{{ namePicture?namePicture.card_number:'' }}</span>
                        </div>
                      </div>
                      <div class="field-box txt-els">
                        <div class="item-l">
                          <label class="fl label">余额</label>
                          <span class="fr wk_name_amt">{{ namePicture?namePicture.charge_card_balance:'' }}</span>
                        </div>
                        <div class="item-r">
                          <label class="fl label">有效期至</label>
                          <span class="fr wk_name_limit">{{ namePicture?namePicture.cards_period:'' }}</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="field-box clear">
                <div class="item-l">
                  <label class="fl label">预约人次</label>
                  <div class="field field-count clear">
                    <el-input-number v-model="people_num" :min="1" :max="10" />
                  </div>
                </div>
                <div class="item-r field-total-price">
                  <label class="fl label">费用</label>
                  <!--              <div class="fr hide" id="J_LPB"><span class="h-course-price">0</span><span class="wk-unit">次</span> 次/人<span class="mx-10">*</span><span class="wk_num">1</span>人 ｜ 共 <span class="wk_sum">0</span> <span class="wk-unit">次</span></div>-->
                </div>
              </div>
              <div class="field-box field-wk-notes-box">
                <div class="item clear">
                  <label class="fl label">备注</label>
                  <el-input v-model="notes" type="textarea" :rows="4" data-msg="请填写0-50字之间" />
                </div>
              </div>
            </div>
            <!-- /团课预约 -->
          </div>
          <div class="posr dialog-content-footer">
            <el-button
              type="primary"
              class="mr-20 btn-autox34 btn-check-wk"
              @click="close_yuyue"
            >保存</el-button>
            <el-button
              type="info"
              class="btn-autox34_disabled js-dialog_close"
              @click="is_yuyue_show = false"
            >取消</el-button>
          </div>
        </div>
      </div>
    </div>
    <div v-if="shuaVisible !== 0" class="zhezhao wh100" />
    <div v-if="shuaVisible !== 0" class="zhezhaoN dis disAl disJuC wh100">
      <el-scrollbar wrap-class="scrollbar-wrapper zhezhaoWH poRel borRad10 bacFFF" style="width: 880px;">
        <div class="wid90 mar">
          <div class="wid100 dis disAl disJuB" style="padding: 30px 0 10px;border-bottom: 1px solid #d9d9d9;">
            <div class="dis disAl">
              <div v-if="shuaVisible === 1" class="foSi20 fowe800 mar-right10">预约记录（团课）</div>
              <div v-if="shuaVisible === 2" class="foSi20 fowe800 mar-right10">会员签到</div>
            </div>
            <svg-icon
              icon-class="guanbi"
              class="mar0 cuPo"
              style="color: #ACACAC;width: 24px;height: 24px;"
              @click.stop="shuaVisibleClick()"
            />
          </div>
          <div v-if="shuaVisible === 1">
            <div class="" style="padding: 20px 0;">
              <div style="height: 92px;">
                <img :src="details.card_coverimg" style="width: 124px;height: 76px;">
              </div>
              <div class="base-title">会员卡信息</div>
              <div class="item-l dis disAl item-bor1">
                <div class="dis disAl disJuB item-w item-bor item-p hei42">
                  <div>卡号</div>
                  <div>{{ details.card_number }}</div>
                </div>
                <div class="dis disAl disJuB item-w item-p hei42">
                  <div>卡名称</div>
                  <div>{{ details.card_name }}</div>
                </div>
              </div>
              <div class="item-l dis disAl item-bor1">
                <div class="dis disAl disJuB item-w item-bor item-p hei42">
                  <div>持卡人</div>
                  <div>{{ details.member_name }} / {{ details.sex === 1?'男':'女' }}</div>
                </div>
                <div class="dis disAl disJuB item-w item-p hei42">
                  <div>手机</div>
                  <div>{{ details.member_tel }}</div>
                </div>
              </div>
              <div class="item-l dis disAl item-bor1">
                <div class="dis disAl disJuB item-w item-bor item-p hei42">
                  <div>当前卡余额</div>
                  <div>{{ details.charge_card_balance }}</div>
                </div>
                <div class="dis disAl disJuB item-w item-p hei42">
                  <div>扣减后余额</div>
                  <div>{{ details.card_ded_balance }}</div>
                </div>
              </div>
              <div class="item-l dis disAl item-bor1">
                <div class="dis disAl disJuB item-w item-bor item-p hei42">
                  <div>开卡场馆</div>
                  <div>{{ details.card_brand }}</div>
                </div>
                <div class="dis disAl disJuB item-w item-p hei42">
                  <div>有效期至</div>
                  <div>{{ details.card_period }}</div>
                </div>
              </div>
              <div class="item-l dis disAl item-bor1 mar-top20">
                <div class="dis disAl disJuB item-w item-bor item-p hei42">
                  <div>课程名称</div>
                  <div>{{ details.class_name }}</div>
                </div>
                <div class="dis disAl disJuB item-w item-p hei42">
                  <div>预约上课时间</div>
                  <div>{{ details.class_start_time }}</div>
                </div>
              </div>
              <div class="item-l dis disAl item-bor1">
                <div class="dis disAl disJuB item-w item-bor item-p hei42">
                  <div>预约人次</div>
                  <div>{{ details.reservation_people }}</div>
                </div>
                <div class="dis disAl disJuB item-w item-p hei42">
                  <div>教练</div>
                  <div>{{ details.coach_name }}</div>
                </div>
              </div>
              <div class="item-l dis disAl item-bor1">
                <div class="dis disAl disJuB item-w item-bor item-p hei42">
                  <div>扣减</div>
                  <div>{{ details.pay_money }}</div>
                </div>
                <div class="dis disAl disJuB item-w item-p hei42">
                  <div>上课教室</div>
                  <div>{{ details.class_room }}</div>
                </div>
              </div>
              <div class="item-l dis disAl item-bor1">
                <div class="dis disAl disJuB item-w item-bor item-p hei42">
                  <div>储物柜</div>
                  <div>{{ details.locker_id }}</div>
                </div>
              </div>
              <div class="item-l dis disAl item-bor1 item-p" style="min-height: 42px;">
                <div style="width: 80px;">备注</div>
                <div>{{ details.notes }}</div>
              </div>
              <div class="item-l dis disAl item-bor1 mar-top20">
                <div class="dis disAl disJuB item-w item-bor item-p hei42">
                  <div>状态</div>
                  <div v-if="details.status === 0">已排队</div>
                  <div v-if="details.status === 1">已预约</div>
                  <div v-if="details.status === 2">已签到</div>
                  <div v-if="details.status === 3">已取消</div>
                  <div v-if="details.status === 4">已完成</div>
                  <div v-if="details.status === 99">待支付</div>
                </div>
              </div>
              <div class="item-l dis disAl item-bor1">
                <div class="dis disAl disJuB item-w item-bor item-p hei42">
                  <div>预约时间</div>
                  <div>{{ details.appoin_time }}</div>
                </div>
                <div class="dis disAl disJuB item-w item-p hei42">
                  <div>预约操作人</div>
                  <div>{{ details.appoin_user }}</div>
                </div>
              </div>
              <div class="item-l dis disAl item-bor1">
                <div class="dis disAl disJuB item-w item-bor item-p hei42">
                  <div>签到时间</div>
                  <div>{{ details.sign_in_time }}</div>
                </div>
                <div class="dis disAl disJuB item-w item-p hei42">
                  <div>签到操作人</div>
                  <div>{{ details.sign_in_user }}</div>
                </div>
              </div>
              <div v-if="details.status === 3" class="item-l dis disAl item-bor1">
                <div class="dis disAl disJuB item-w item-bor item-p hei42">
                  <div>取消时间</div>
                  <div>{{ details.cancel_reservation_time }}</div>
                </div>
                <div class="dis disAl disJuB item-w item-p hei42">
                  <div>取消操作人</div>
                  <div>{{ details.cancel_reservation_user_name }}</div>
                </div>
              </div>
            </div>
            <div class="wid100 dis disAl disJuC foSi14 coFFF" style="padding: 20px 0 40px">
              <div class="que cuPo" style="background: #616b74;" @click.stop="shuaVisibleClick()">关闭</div>
            </div>
          </div>
          <div v-if="shuaVisible === 2">
            <div class="" style="padding: 20px 0;">
              <div class="dis" style="height: 82px;">
                <img :src="details.headimg" style="width: 70px;height: 70px;">
                <div class="mar-left15">{{ details.member_name }}</div>
                <div class="mar-left10">
                  <svg-icon v-if="details.sex !== 1" icon-class="gril" class="mar0" style="width: 18px;height: 18px;" />
                  <svg-icon v-else icon-class="son" class="mar0" style="width: 18px;height: 18px;" />
                </div>
              </div>
              <div class="base-title">会员信息</div>
              <div class="item-l dis disAl item-bor1">
                <div class="dis disAl disJuB item-w item-bor item-p hei42">
                  <div>电话</div>
                  <div>{{ details.member_tel }}</div>
                </div>
                <div class="dis disAl disJuB item-w item-p hei42">
                  <div>会籍顾问</div>
                  <div>{{ details.consultant }}</div>
                </div>
              </div>
              <div class="item-l dis disAl item-bor1">
                <div class="dis disAl disJuB item-w item-bor item-p hei42">
                  <div>卡号</div>
                  <div>{{ details.card_number }}</div>
                </div>
                <div class="dis disAl disJuB item-w item-p hei42">
                  <div>卡名称</div>
                  <div>{{ details.card_name }}</div>
                </div>
              </div>
              <div class="item-l dis disAl item-bor1">
                <div class="dis disAl disJuB item-w item-bor item-p hei42">
                  <div>有效期至</div>
                  <div>{{ details.card_period }}</div>
                </div>
                <div class="dis disAl disJuB item-w item-p hei42">
                  <div>余额</div>
                  <div>{{ details.charge_card_balance }}</div>
                </div>
              </div>
              <div class="base-title mar-top20">课程信息</div>
              <div class="item-l dis disAl item-bor1">
                <div class="dis disAl disJuB item-w item-bor item-p hei42">
                  <div>课程类型</div>
                  <div>团课</div>
                </div>
                <div class="dis disAl disJuB item-w item-p hei42">
                  <div>课程名称</div>
                  <div>{{ details.class_name }}</div>
                </div>
              </div>
              <div class="item-l dis disAl item-bor1">
                <div class="dis disAl disJuB item-w item-bor item-p hei42">
                  <div>上课时间</div>
                  <div>{{ details.class_time }}</div>
                </div>
                <div class="dis disAl disJuB item-w item-p hei42">
                  <div>课程时长</div>
                  <div>{{ details.long_time }}</div>
                </div>
              </div>
              <div class="item-l dis disAl item-bor1">
                <div class="dis disAl disJuB item-w item-bor item-p hei42">
                  <div>教练</div>
                  <div>{{ details.coach_name }}</div>
                </div>
              </div>
              <div class="item-l dis disAl item-bor1 item-p" style="min-height: 42px;">
                <div style="width: 80px;">备注</div>
                <div>{{ details.notes }}</div>
              </div>
              <div class="base-title mar-top20">储物柜信息</div>
              <div class="item-l dis disAl item-bor1">
                <div class="dis disAl disJuB item-w item-bor item-p hei42">
                  <div>储物柜编号</div>
                  <el-input
                    v-model="locker_number"
                    style="width: 140px;"
                    size="small"
                    placeholder="请输入储物柜编号"
                  />
                </div>
              </div>
            </div>
            <div class="wid100 dis disAl disJuC foSi14 coFFF" style="padding: 20px 0 40px">
              <div class="mar-right20 que cuPo" style="background: #48a9f3;" @click.stop="checkClick(1,details.id)">确认
              </div>
              <div class="que cuPo" style="background: #616b74;" @click.stop="shuaVisibleClick()">取消</div>
            </div>
          </div>
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import {
  getXuan,
  judgeButton
} from '@/utils/limits.js'
import {
  mapGetters
} from 'vuex'
import {
  getCourseshoolList
} from '@/api/coures'
import {
  getGroupclass,
  cancelOper,
  getSignIn,
  appointmentRecord,
  appointmentDetails
} from '@/api/dashboard' // Secondary package based on el-pagination
import {
  getSearchCardUser,
  getGroupLessons,
  getGroupLessonsPd
} from '@/api/components'
export default {
  name: 'Dashboard',
  components: {
    Pagination
  },
  data() {
    return {
      locker_number: '',
      shuaVisible: 0,
      details: {},
      list: null,
      timeIndex: 0,
      oneTime: '',
      sevenTime: '',
      todayTime: '',
      timeList: [],
      skin: 0,
      surface: 1,
      surfaceList: [{
        label: '显示全部课程',
        value: 1
      }, {
        label: '仅显示本周课程',
        value: 2
      }],
      check: [1, 2, 3, 4, 5, 6],
      reservation_num: 0,
      line_num: 0,
      listQuery: {
        page: 1,
        limit: 10
      },
      schedule_type: 1, // 1日课表2周课表
      search_course_id: null, // 日课表选中的课程ID
      week_search_course_id: null, // 周课表选中的课程ID
      week: '',
      currentRole: 'adminDashboard',
      timelist: [], // 搜索时间
      daytime: '', // 单日搜索
      todayatime: 0,
      course_list: [],
      btn_choice: 1,
      table_sort: false, // 打开表格排序
      loading: false,
      // 预约
      tableData: [],
      // 排队
      pdtableData: [],
      multipleSelection: [],
      multipleSelectionIds: '',
      getDetails: true,
      is_yuyue_show: false,
      search_npc: '',
      notes: '',
      people_num: '',
      nameVisible: false,
      nameList: [],
      namePicture: null,
      courseLeft: 0,
      courseList: [],
      courseIndex: 0,
      courseBiaoshi: false,
      times: 0,
      is_pd: 0
    }
  },
  computed: {
    ...mapGetters([
      'permission_routes',
      'roles',
      'avatar'
    ])
  },
  created() {
    if (!this.roles.includes('admin')) {
      this.currentRole = 'editorDashboard'
    }
    var xuanList = [{
      name: '团课预约记录',
      url: '/dashboard',
      pd: true
    },
    {
      name: '私教预约记录',
      url: '/privateappointment',
      pd: true
    },
    {
      name: '爽约惩罚',
      url: '/punishment',
      pd: true
    },
    {
      name: '储物柜',
      url: '/locker',
      pd: true
    },
    {
      name: '请假管理',
      url: '/leavemanage',
      pd: true
    },
    {
      name: '班课上课记录',
      url: '/classrecord',
      pd: true
    }
    ]
    var xuanList1 = getXuan(xuanList, this.roles)
    this.$store.dispatch('user/changeXuan', {
      key: 'xuanList',
      value: xuanList1
    })
    this.$store.dispatch('user/changeXuan', {
      key: 'xuan',
      value: 0
    })
    this.gettime()
    var check = localStorage.getItem('check')
    if (check) {
      var list = check.split(',')
      this.check = list.map(Number)
    }
    this.timeCreated()
  },
  methods: {
    shuaVisibleClick() {
      this.shuaVisible = 0
    },
    getDetailsClick(id, type) {
      appointmentDetails({
        id: id
      }).then(response => {
        const {
          data
        } = response
        this.details = data
        this.shuaVisible = type
      }).catch(error => {
        console.log(error)
      })
    },
    courseCreated() {
      var courseSlide = document.getElementById('courseSlide')
      var courseSlide1 = document.getElementById('courseSlide1')
      var width = courseSlide.offsetWidth
      var width1 = courseSlide1.offsetWidth
      var width2 = width1 - width
      var number = Math.ceil(width2 / 212)
      var number1 = Math.ceil(number / 4) + 1
      for (var i = 0; i < number1; i++) {
        this.courseList.push(212 * 4 * i)
      }
      console.log(123123, this.courseList)
    },
    courseSlideClick(index) {
      console.log(this.courseIndex)
      console.log(this.courseList.length)
      if (index === 0 && this.courseIndex > 0 && !this.courseBiaoshi) {
        this.courseIndex -= 1
        this.courseTimeout(2)
      } else if (index === 1 && this.courseIndex < this.courseList.length - 1 && !this.courseBiaoshi) {
        this.courseIndex += 1
        this.courseTimeout(1)
      }
    },
    courseTimeout(index) {
      this.courseBiaoshi = true
      var timer = setInterval(() => {
        if (index === 1) {
          this.courseLeft += 212 / 10
          if (this.courseList[this.courseIndex] <= this.courseLeft) {
            this.courseLeft = this.courseList[this.courseIndex]
            this.courseBiaoshi = false
            clearInterval(timer)
          }
        } else {
          this.courseLeft -= 212 / 10
          if (this.courseList[this.courseIndex] >= this.courseLeft) {
            this.courseLeft = this.courseList[this.courseIndex]
            this.courseBiaoshi = false
            clearInterval(timer)
          }
        }
      }, 10)
    },
    upQueue(id) {
      this.$confirm('确认取消预约么？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        cancelOper({
          'type': this.btn_choice === 1 ? 2 : 1,
          'id': id
        }).then(response => {
          const {
            data
          } = response
          this.$message({
            message: '取消排队成功',
            type: 'success'
          })
          this.coureschange(this.btn_choice)
        }).catch(error => {
          console.log(error)
        })
      })
    },
    nameClick(item) {
      this.namePicture = item
      this.search_npc = item.realname
      this.nameVisible = false
    },
    nameInput(e) {
      var date = {
        'keyword': e
      }
      getSearchCardUser(date).then(response => {
        const {
          data
        } = response
        console.log(data)
        this.nameList = data
        this.nameVisible = true
      }).catch(error => {
        console.log(error)
        this.listLoading = false
      })
    },
    yuyue(item, is_pd = 0) {
      if (item.people_num <= item.reservation_num) {
        this.$confirm('预约人数已满，继续预约?', '提示', {
          confirmButtonText: '继续预约',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.group = item
          this.is_pd = is_pd
          this.is_yuyue_show = true
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消预约'
          })
        })
      } else {
        this.group = item
        this.is_yuyue_show = true
      }
      // if(this.group)
    },
    close_yuyue() {
      if (!this.namePicture) {
        return this.$message.error('请选择会员卡')
      }
      var date = {
        'type': 1,
        'class_id': this.group.course_id,
        'class_name': this.group.name,
        'courseschool_id': this.group.id,
        'card_id': this.namePicture.id,
        'card_no': this.namePicture.card_number,
        'reservation_people': this.people_num,
        'teacher_id': this.namePicture.coach_id,
        'teacher_name': this.namePicture.coach_name,
        'minus': this.people_num,
        'lockers_id': '',
        'notes': this.notes
      }
      if (this.is_pd == 0) {
        getGroupLessons(date).then(response => {
          const {
            data
          } = response
          this.is_yuyue_show = false
          // this.getGroupclass()
          this.course_change(this.group.id)
        }).catch(error => {
          console.log(error)
        })
      } else if (this.is_pd == 1) {
        getGroupLessonsPd(date).then(response => {
          const {
            data
          } = response
          this.is_yuyue_show = false
          // this.getGroupclass()
          this.course_change(this.group.id)
        }).catch(error => {
          console.log(error)
        })
      }
    },
    getJudge(name) {
      return judgeButton(name, this.roles)
    },
    week_search_coures_change(id) {
      this.week_search_course_id = id
      this.coureschange(2)
    },
    schedule_change(type) {
      this.schedule_type = type
      if (type === 1) {
        this.getGroupclass()
      } else {
        this.coureschange(this.btn_choice)
      }
    },
    getGroupclass() {
      var that = this
      getGroupclass({
        'date': this.daytime
      }).then(response => {
        const {
          data
        } = response
        this.course_list = data
        this.courseLeft = 0
        this.courseList = []
        this.courseIndex = 0
        var id = null
        var ass = true
        this.course_list.forEach(item => {
          if (item.class_state === 1 && ass) {
            ass = false
            id = item.id
          }
        })
        console.log(12311, this.course_list)
        if (ass && this.course_list.length > 0) {
          this.course_change(this.course_list[0].id)
        } else {
          this.course_change(id)
        }
        setTimeout(() => {
          that.courseCreated()
        }, 100)
      }).catch(error => {
        console.log(error)
      })
    },
    getAppointmentRecord(id) {
      appointmentRecord({
        'courseschool_id': id,
        'line_up': this.btn_choice,
        'times': this.daytime
      }).then(response => {
        const {
          data
        } = response
        console.log(data)
        this.reservation_num = data.reservation_num
        this.line_num = data.line_num
        this.tableData = data.data
        this.loading = false
      }).catch(error => {
        console.log(error)
        this.loading = false
      })
    },
    course_change(id, item) {
      this.group = item
      this.search_course_id = id
      this.listQuery.page = 1
      this.coureschange(this.btn_choice)
    },
    quxiaoCheck(id) {
      this.$confirm('确认取消签到么？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        getSignIn({
          type: 2,
          idlist: id,
          courseschool_id: this.search_course_id
        }).then(response => {
          const {
            data
          } = response
          this.$message({
            message: '取消签到成功',
            type: 'success'
          })
          this.coureschange(1)
        }).catch(error => {
          console.log(error)
        })
      })
    },
    checkClick(type, id) {
      var papem
      if (type === 1) {
        papem = {
          type: 1,
          idlist: id,
          courseschool_id: this.search_course_id
        }
      } else if (type === 2) {
        if (!this.multipleSelectionIds) {
          return this.$message.error('请先选择会员')
        }
        papem = {
          type: 1,
          idlist: this.multipleSelectionIds,
          courseschool_id: this.search_course_id
        }
      } else {
        papem = {
          type: 3,
          idlist: '',
          courseschool_id: this.search_course_id
        }
      }
      this.qiandao(papem)
    },
    qiandao(papem) {
      getSignIn(papem).then(response => {
        const {
          data
        } = response
        this.$message({
          message: '签到成功',
          type: 'success'
        })
        this.shuaVisibleClick()
        this.coureschange(1)
      }).catch(error => {
        console.log(error)
      })
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
      var ids = []
      // 去重获取被选中的id值存入到数组中
      for (const selectedItem of val) {
        ids.push(selectedItem.id)
      }
      this.multipleSelectionIds = ids.join(', ')
    },
    coureschange(type) {
      this.loading = true
      if (type !== this.btn_choice) {
        this.listQuery.page = 1
      }
      this.btn_choice = type
      this.getAppointmentRecord(this.search_course_id)
    },
    gettime() {
      const now = new Date()
      this.times = parseInt(new Date().getTime() / 1000)
      const year = now.getFullYear()
      const month = now.getMonth() + 1
      const day = now.getDate()
      this.todayatime = 0
      this.daytime = year + '-' + month + '-' + day
      var weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
      this.week = weeks[now.getDay()]
      this.getGroupclass()
    },
    up_daytime(type) {
      const now = new Date()
      now.setDate(now.getDate() + (type === 1 ? this.todayatime + 1 : this.todayatime - 1)) // 获取AddDayCount天后的日期
      const year = now.getFullYear()
      var month = (now.getMonth() + 1) < 10 ? '0' + (now.getMonth() + 1) : (now.getMonth() + 1) // 获取当前月份的日期，不足10补0
      var day = now.getDate() < 10 ? '0' + now.getDate() : now.getDate() // 获取当前几号，不足10补0
      type === 1 ? this.todayatime++ : this.todayatime--
      this.daytime = year + '-' + month + '-' + day
      var weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
      this.week = weeks[now.getDay()]
      this.getGroupclass()
    },
    timeChange(e) {
      if (e === 1) {
        this.timeIndex -= 1
      } else {
        this.timeIndex += 1
      }
      this.timeCreated()
    },
    timeCreated() {
      var date = new Date()
      var day = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
      this.todayTime = date.setHours(0, 0, 0, 0)
      // 本周一的日期
      date.setDate(date.getDate() + this.timeIndex * 7 - date.getDay() + 1)
      this.oneTime = {
        date: date.setHours(0, 0, 0, 0),
        time: date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + (date.getDate() >= 10 ? date
          .getDate() : '0' + date.getDate())
      }
      this.timeList = [{
        name: day[date.getDay()],
        date: this.oneTime.date,
        dateName: date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + (date.getDate() >= 10 ? date
          .getDate() : '0' + date.getDate()),
        time: (date.getMonth() + 1) + '.' + (date.getDate() >= 10 ? date.getDate() : '0' + date
          .getDate())
      }]
      for (var i = 1; i <= 6; i++) {
        // 本周日的日期
        date.setDate(date.getDate() + 1)
        this.timeList.push({
          name: day[date.getDay()],
          date: date.setHours(0, 0, 0, 0),
          dateName: date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + (date.getDate() >= 10
            ? date
              .getDate() : '0' + date.getDate()),
          time: (date.getMonth() + 1) + '.' + (date.getDate() >= 10 ? date.getDate() : '0' + date
            .getDate())
        })
        if (i === 6) {
          this.sevenTime = {
            date: date.setHours(0, 0, 0, 0),
            time: date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + (date.getDate() >= 10 ? date
              .getDate() : '0' + date.getDate())
          }
        }
      }
      console.log(this.todayTime)
      console.log(this.timeList)
      this.getList()
    },
    checkChange(e) {
      console.log(this.check)
      localStorage.setItem('check', this.check)
      this.getList()
    },
    skinClick(index) {
      if (this.skin !== index) {
        this.skin = index
        this.getList()
      }
    },
    getList() {
      getCourseshoolList({
        'startday': this.oneTime.time,
        'endday': this.sevenTime.time
      }).then(response => {
        const {
          data
        } = response
        this.list = data
        this.list.forEach(item => {
          if (item.id) {
            this.week_search_course_id = item.id
          }
        })
      }).catch(error => {
        console.log(error)
      })
    }
  }
}
</script>
<style>

	.l-r {
		background-color: #ededed;
		padding: 7px;
		border-radius: 50%;
		cursor: pointer;
	}

	.xian {
		border-bottom: 1px solid #ededed;
	}

	.items {
		width: 192px;
		height: 210px;
	}

	.yybtn {
		width: 60px;
		height: 34px;
		text-align: center;
		margin-left: -10px;
		margin-top: 5px;
		line-height: 34px;
		color: #fff;
		background: #6b7cdd;
		cursor: pointer;
		border-radius: 0px 5px 5px 0px;
	}

	.jcsjbtn {
		width: 60px;
		height: 34px;
		text-align: center;
		margin-right: -10px;
		margin-top: 5px;
		line-height: 34px;
		color: #fff;
		background: #6b7cdd;
		cursor: pointer;
		border-radius: 5px 0px 0px 5px;
	}
	.yybtn1 {
		width: 60px;
		height: 34px;
		text-align: center;
		line-height: 34px;
		color: #fff;
		background: #6b7cdd;
		cursor: pointer;
		border-radius: 0px 5px 5px 0px;
	}
	.yybtn2 {
		width: 60px;
		height: 34px;
		line-height: 34px;
		border-radius: 0px 5px 5px 0px;
	}

	.person_icon {
		width: 27px;
		height: 47px;
		margin-right: 13px;
		border-radius: 50%;
		padding: 10px 0;
	}

	.left_btn {
		border-radius: 25px;
		display: inline-block;
		line-height: 1;
		cursor: pointer;
		background: #FFFFFF;
		border: 2px solid #6b7cdd;
		text-align: center;
		font-weight: 400;
		padding: 8px 15px;
		font-size: 12px;
		margin-left: 20px;
	}

	.right_btn {
		border: 2px solid #6b7cdd;
		border-radius: 0px 25px 25px 0px;
		text-align: center;
		padding: 7px 10px;
		font-size: 14px;
		width: 100px;
		border-left: none;
		cursor: pointer;
	}

	.choice_btn {
		color: #ffffff;
		background-color: #6b7cdd;
	}

	.huise {
		background-color: #ededef !important;
	}

	.cur_choice {
		border: 1px solid #6b7cdd !important;
	}

	.change-skin {
		width: 72px;
		height: 29px;
		background: url('https://cloud.keepyoga.com/static/img/skin-change.png?v=7ca5bfe') no-repeat left bottom;
		overflow: hidden;
		cursor: pointer;
	}

	.change-skin span {
		float: left;
		width: 36px;
		height: 29px;
	}

	.change-skin.curr {
		background-position: left top;
	}

	::v-deep .el-checkbox {
		margin-right: 10px;
	}

	::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
		background-color: #41c3a8;
		border-color: #41c3a8;
	}

	::v-deep .el-checkbox__input.is-focus .el-checkbox__inner {
		border-color: #41c3a8;
	}

	::v-deep .el-checkbox__label {
		color: #000 !important;
	}

	.xuanze {
		-moz-user-select: none;
		/*火狐*/
		-webkit-user-select: none;
		/*webkit浏览器*/
		-ms-user-select: none;
		/*IE10*/
		-khtml-user-select: none;
		/*早期浏览器*/
		user-select: none;
	}

	table {
		border-collapse: collapse;
		border-spacing: 0;
	}

	.syllabus-content-data {
		table-layout: fixed;
	}

	.syllabus-content-data th {
		height: 53px;
		border: 1px solid #d9d9d9;
		font-weight: 400;
	}

	.syllabus-content-data td {
		border: 1px solid #d9d9d9;
		vertical-align: top;
	}

	.syllabus-content-data2 th,
	.syllabus-content-data2 td {
		border: 1px solid #494949;
	}

	.syllabus-content-data .empty-cell {
		color: #4f4f4f;
	}

	.syllabus-thead-cell {
		position: relative;
		padding: 6px 12px;
		text-align: left;
	}

	.syllabus-thead-cell .course-add {
		position: absolute;
		right: 0;
		top: 0;
		width: 26px;
		height: 26px;
	}

	td,
	th {
		padding: 0;
	}

	.syllabus-content-data .time-group-text-box {
		vertical-align: middle;
	}

	.syllabus-list-course {
		overflow: hidden;
	}

	.active1 {
		position: relative;
		min-height: 105px;
		/* padding: 6px 12px; */
		line-height: 1.5;
		cursor: pointer;
	}

	.syllabus-list-course .course-color {
		position: absolute;
		width: 14px;
		height: 25px;
		right: 10px;
		top: 0;
	}

	.syllabus-list-course .course-color .arrow {
		position: absolute;
		width: 0;
		height: 0;
		left: 0;
		bottom: 0;
		border-left: 7px solid transparent;
		border-right: 7px solid transparent;
		border-bottom: 6px solid #fff;
	}

	.quality-badge {
		position: absolute;
		right: 30px;
		top: 0;
		width: 19px;
		height: 25px;
		background: url('../../icons/png/quality.png') no-repeat center center;
	}

	.stop-ribbon {
		text-align: center;
		width: 100px;
		height: 30px;
		line-height: 30px;
		position: absolute;
		top: 7px;
		left: -28px;
		z-index: 1;
		color: #fff;
		overflow: hidden;
		background: rgba(0, 0, 0, .4);
		-webkit-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}

	/**
预约弹窗
 */
	.m-dialog-box {
		position: absolute;
		width: 962px;
		left: 50%;
		top: 10%;
		margin-left: -480px;
		z-index: 1200;
		opacity: 0;
		transition: all .2s ease-in-out;
	}

	.m-dialog-bg {
		position: fixed;
		z-index: 1000;
		background: rgba(0, 0, 0, .4);
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
	}

	.dialog-content {
		background: #ffffff;
		border-radius: 10px;
	}

	.fade-in {
		opacity: 1;
	}

	.dialog-content .dialog-content-header {
		position: relative;
		padding: 30px 0 10px;
		font-size: 20px;
		line-height: 20px;
		border-bottom: 1px solid #d9d9d9;
		margin: 0 60px;
		font-weight: 700;
	}

	.dialog-content .dialog-content-main {
		padding: 20px 60px;
	}

	.dialog-content .dialog-content-footer {
		padding: 20px 30px 40px;
		text-align: center;
	}

	.dialog-content .dialog-content-header .dialog-close {
		position: absolute;
		right: 0;
		top: 28px;
		width: 24px;
		height: 24px;
		background: url(../../../public/img/close.svg) no-repeat 0 0;
		background-size: 24px 24px;
		cursor: pointer;
	}

	.mr-15 {
		margin-right: 15px;
	}

	.flex-edit-box {
		position: relative;
	}

	.flex-edit-box .field-box {
		margin-bottom: 8px;
		background: #f2f2f2;
		min-height: 42px;
		line-height: 42px;
	}

	.flex-edit-box .field-box:last-child {
		margin-bottom: 0;
	}

	.m-wkt-order .field-wk-notes-box {
		position: relative;
	}

	.flex-edit-box .field-box {
		margin-bottom: 8px;
		background: #f2f2f2;
		min-height: 42px;
		line-height: 32px;
	}

	.flex-edit-box .field-box .item {
		padding: 5px 15px;
	}

	.clear {
		zoom: 1;
	}

	.m-wkt-order .field-box .label {
		width: 100px;
	}

	.fl {
		float: left;
	}

	.mr-25 {
		margin-right: 25px;
	}

	.dialog-wk-memberinfo-box {
		float: left;
		width: 710px;
	}

	.m-wkt-order .field-box .dialog-wk-memberinfo {
		width: 710px;
		border: 1px dashed #d9d9d9;
		margin-top: 10px;
		background: #f2f2f2;
		overflow: hidden;
	}

	.flex-detail-box {
		position: relative;
	}

	.dialog-wk-memberinfo .field-box {
		margin-bottom: 0;
	}

	.flex-edit-box .field-box {
		margin-bottom: 8px;
		background: #f2f2f2;
		min-height: 42px;
		line-height: 32px;
	}

	.flex-detail-box .field-box {
		margin-bottom: 2px;
		background: #f2f2f2;
		min-height: 42px;
		line-height: 32px;
	}

	.txt-els {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.flex-edit-box .field-box .item-l {
		border-right: 2px solid #ffffff;
	}

	.flex-edit-box .field-box .item-l,
	.flex-edit-box .field-box .item-r {
		float: left;
		width: 50%;
		padding: 5px 15px;
		box-sizing: border-box;
	}

	.m-wkt-order .field-box .label {
		width: 100px;
	}

	.fl {
		float: left;
	}

	.fr {
		float: right;
	}

	.m-wkt-order .field-box .field-count {
		position: relative;
		float: right;
		height: 32px;
		padding-right: 22px;
	}

	.m-wkt-order .field-box .field .wk-add {
		position: absolute;
		right: 0;
		top: 0;
		width: 25px;
		height: 30px;
		border: 1px solid #d9d9d9;
		background: #ffffff;
		cursor: pointer;
	}

	.m-wkt-order .field-box .field .wk-minus {
		position: absolute;
		left: 0;
		top: 0;
		width: 25px;
		height: 30px;
		border: 1px solid #d9d9d9;
		background: #ffffff;
		cursor: pointer;
	}

	.m-wkt-order .field-box .field .count {
		position: absolute;
		height: 30px;
		line-height: 30px;
		width: 48px;
		left: 26px;
		text-align: center;
		border: 1px solid #d9d9d9;
	}

	.nameSuo {
		min-width: 138px;
		z-index: 15;
		background: #fff;
		border: 1px solid #d9d9d9;
		top: 35px;
	}

	.suosouText {
		height: 32px;
		line-height: 32px;
		padding: 0 10px;
		border-bottom: 1px solid #d9d9d9;
		cursor: pointer;
		white-space: nowrap;
	}
	.base-title{
		height: 22px;
		font-size: 12px;
		color: #787878;
	}
</style>
